<template>
  <div>
    <div class="qm_editor" :id="curId+'Root'+curIndex"></div>
    {{msg}}
  </div>
  
</template>
<script setup>
import { defineProps, defineEmits, onMounted,onUnmounted ,reactive, watch } from 'vue';
import E from 'wangeditor';

const props = defineProps({
  msg: {
    type: String,
    default: '',
  },
  curId: String,
  curIndex: String | Number
});
let editor = null;

const emit = defineEmits(['input-value']);

watch(() => props.msg, (val) => {
  if (editor && val) {
    console.log('value-----');
    editor.txt.html(val);
  }
});

onMounted(() => {
  const { curId, curIndex } = props;
  const ele = curId + 'Root' + curIndex;
  editor = new E('#' + ele);
  
  // editor.txt.html('<li>设置文本<li>');
    
  
  editor.config.onchange = function (newHtml) {
    // console.log("change 之后最新的 html", `<li>${newHtml}</li>`);
    // console.log(newHtml.replace(/<p>(.*?)<\/p>/g, '<li>$1</li>'))
    let str = newHtml.replace(/<p>(.*?)<\/p>/g, '<li>$1</li>')
    emit('input-value', {value: str, index: curIndex, type: curId });
  };
  editor.create();

  editor.txt.html(props.msg);

});

</script>
